<template>
  <div class="md-layout">
    <div class="md-layout-item">
      <md-card>
        <md-card-header v-show="icon || title" class="md-card-header-icon md-card-header-green">
          <div class="card-icon">
            <md-icon>{{icon}}</md-icon>
          </div>
          <h4 class="title">{{title}} {{smallTitle?'-':''}} <small>{{smallTitle}}</small></h4>
          <slot name="title"></slot>
        </md-card-header>
        <md-card-content>
          <slot name="search"></slot>
          <md-table :value="rows" @md-selected="onSelect" table-header-color="green" class="paginated-table table-hover">
            <template slot="md-table-row" slot-scope="scopedProps">
              <slot v-bind="scopedProps"></slot>
            </template>
          </md-table>
        </md-card-content>
        <md-card-actions md-alignment="space-between">
          <div class="table-tip">
            <p class="card-category">显示第 {{from + 1}} 到第 {{to}} 条数据，总共 {{total}} 条数据&nbsp;&nbsp;&nbsp;&nbsp;每页显示&nbsp;&nbsp;</p>
            <md-field style="width: 60px;">
              <md-select v-model="pageSize">
                <md-option
                  v-for="item in pageSizeList"
                  :key="item"
                  :label="item"
                  :value="item">
                  {{ item }}
                </md-option>
              </md-select>
            </md-field>
            <p class="card-category">&nbsp;&nbsp;条数据</p>
          </div>
          <pagination class="pagination-no-border pagination-success"
                      v-model="pageNo"
                      @input="pageChange"
                      :per-page="pageSize"
                      :total="total">
          </pagination>
        </md-card-actions>
      </md-card>
    </div>
  </div>

</template>

<script>
  import {Pagination} from '@/components'

  export default {
    components: {
      Pagination
    },
    props:{
      icon:{
        type: String,
        default: 'assignment',
      },
      title: {
        type: String,
      },
      smallTitle:{
        type: String,
      },
      rows:{
        type: Array,
        // eslint-disable-next-line
        default: [],
      },
      total:{
        type: Number,
        default: 0,
      },
    },
    computed: {
      from () {
        return this.pageSize * (this.pageNo-1)
      },
      to () {
        let highBound = this.from + this.pageSize
        if (this.total < highBound) {
          highBound = this.total
        }
        return highBound
      },
    },
    data () {
      return {
        pageSize: 10,
        pageNo: 1,
        pageSizeList: [10, 50, 100],
      }
    },
    methods: {
      onSelect(items){
        this.$emit('on-select', items);
      },
      resetPageNo(){
        this.pageNo = 1;
        this.pageChange();
      },
      pageChange(){
        this.$emit('page-change',{pageSize: this.pageSize, pageNo: this.pageNo})
      },
    },
    mounted () {
    },
    watch: {

    }
  }
</script>

<style lang="css" scoped>
  .md-card .md-card-actions{
    border: 0;
    margin-left: 20px;
    margin-right: 20px;
  }
  .table-tip{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
